<template>
  <div
    role="button"
    tabindex="0"
    draggable="true"
    :data-dir="isDir"
    :aria-label="name"
    @dblclick="open"
  >
    <div />
    <el-row :gutter="20" class="item">
      <el-col :span="6">
        <p :class="type | iconFilter" style="padding-left:25px">
          {{ name }}
        </p>
      </el-col>
      <el-col :span="6">
        <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
        <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
      </el-col>
      <el-col :span="6">
        <p class="modified">
          <time :datetime="modified">{{ humanTime() }}</time>
        </p>
      </el-col>

    </el-row>

    <el-dialog
      title="选择您的操作"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" style="merge-right:180px" @click="download()">下载</el-button>

        <el-button v-popover:popover5 type="danger">删除</el-button>
      </span>

      <el-popover
        ref="popover5"
        v-model="confrimVisible"
        placement="top"
        width="160"
      >
        <p>删除将无法找回 确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="confrimVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="del()">确定</el-button>
        </div>
      </el-popover>
    </el-dialog>
  </div>
</template>

<script>
import { deleteCloudFile, downloadCloudFile } from '@/api/file'
import filesize from 'filesize'
import moment from 'moment'
import { saveAs } from 'file-saver'

export default {
  name: 'Item',
  inject: ['reload'],
  filters: {
    iconFilter(type) {
      // 显示不了
      // if (type === 'dir') return 'el-icon-edit'
      if (type === 'dir') return 'el-icon-goods'
      if (type === 'image') return 'el-icon-picture'
      if (type === 'audio') return 'el-icon-video-camera'
      return 'el-icon-document'
    }
  },
  props: {
    name: {
      type: String,
      default: () => {
        return 'nodata'
      }
    },
    isDir: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    url: {
      type: String,
      default: () => {
        return 'nodata'
      }
    },
    type: {
      type: String,
      default: () => {
        return 'nodata'
      }
    },
    size: {
      type: Number,
      default: () => {
        return 'nodata'
      }
    },
    modified: {
      type: String,
      default: () => {
        return '2020-6-20 21:20'
      }
    },
    index: {
      type: Number,
      default: () => {
        return 'nodata'
      }
    }
  },
  data: function() {
    return {
      dialogVisible: false,
      confrimVisible: false
    }
  },
  computed: {
    icon() {
      if (this.isDir) return 'folder'
      if (this.type === 'image') return 'insert_photo'
      if (this.type === 'audio') return 'volume_up'
      if (this.type === 'video') return 'movie'
      return 'insert_drive_file'
    }
  },
  created() {
  },
  methods: {
    humanSize: function() {
      return filesize(this.size)
    },
    humanTime: function() {
      return moment(this.modified).fromNow()
    },
    open: function() {
      this.dialogVisible = true
    },
    del: function() {
      this.confrimVisible = false
      this.dialogVisible = false
      deleteCloudFile({
        file: this.name,
        user: this.$store.getters.name
      }).then(res => {
        this.reload()
      }).catch(err => {
        console.log(err)
        this.$notify({
          message: '删除失败'
        })
      })
    },
    download: function() {
      this.dialogVisible = false
      downloadCloudFile({
        file: this.name,
        user: this.$store.getters.name
      }).then(res => {
        saveAs(res, this.name)
      }).catch(err => {
        console.log(err)
        this.$notify({
          message: '下载错误..'
        })
      })
    }
  }
}
</script>

<style scoped>
.item:hover {
  background-color: #4d6161;
  color: wheat;
}
.item {
  /* background-color: #2d50c5; */
  border: 1px solid #F3F4F4;
  border-radius: 4px;
}
.el-col{
  border-radius: 4px;
}
</style>
